import React from 'react';
import { Modal, message } from 'antd';
import {
  FormPanel,
  FormPanelType,
  type FormPanelObject,
  InputType,
  FormPanelBtnAlign,
  FormPanelBtnDisplay,
  Utils,
} from 'lfun-bg-comp';
import { useNavigate } from 'react-router-dom';
import { CreateSchool, createSchool } from '@/service/unit/school';
import { buildPageItemTxtByEduType, getPathRoot } from '@/utils';
import { searchPlanningSchoolOptions } from '@/service/options';
import useCountry from '@/hooks/useCountry';

const Groups: React.FC<{ show: boolean; onCancel: any; planningSchoolId: string }> = ({
  show,
  onCancel,
  planningSchoolId,
}) => {
  const navigate = useNavigate();
  const country = useCountry();
  const list: FormPanelType[] = [
    {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      span: '24',
      inputs: [
        {
          label: buildPageItemTxtByEduType('园所(学校)名称'),
          name: 'planning_school_id',
          key: 'planning_school_id',
          required: true,
          inputType: InputType.search,
          renderOption: searchPlanningSchoolOptions,
          formatSubmitValue: val => {
            if (typeof val === 'object') {
              return val.value;
            }
            return val;
          },
        },
        {
          label: buildPageItemTxtByEduType('园所(分校)名称'),
          name: 'school_name',
          key: 'school_name',
          required: true,
          textRange: [0, 20],
        },
        {
          label: buildPageItemTxtByEduType('机构编码'),
          name: 'school_no',
          key: 'school_no',
          required: true,
          textRange: [0, 20],
        },
        {
          label: '地域管辖区',
          name: 'block',
          key: 'block',
          required: true,
          inputType: InputType.select,
          renderOption: country,
        },
        {
          label: '行政管辖区',
          name: 'borough',
          key: 'borough',
          required: true,
          inputType: InputType.select,
          renderOption: country,
        },
        // {
        //   label: '学校星级',
        //   name: 'school_level',
        //   key: 'school_level',
        //   required: true,
        //   inputType: InputType.select,
        //   renderOption: KG_LEVEL,
        // },
      ],
    },
  ];
  return (
    <Modal
      className="close_reson"
      open={show}
      title={buildPageItemTxtByEduType('新增园所(分校)')}
      footer={[]}
      cancelText="返回"
      okText="确认"
      onCancel={onCancel}
      width="600px"
    >
      <FormPanel
        btnsAlign={FormPanelBtnAlign.center}
        buttonsDisplay={FormPanelBtnDisplay.block}
        restBtnText="返回"
        submitBtnText="确定"
        template={list}
        values={{ planning_school_id: planningSchoolId }}
        onFinish={async (formPanelObject: FormPanelObject) => {
          const values = formPanelObject.getFieldsValue();
          const school: CreateSchool = { ...values };
          const res = await createSchool(school);
          if (res.success) {
            message.success(buildPageItemTxtByEduType('新增园所(学校)成功'));
            onCancel(formPanelObject);
            formPanelObject.resetFields();
            navigate(`${getPathRoot()}/school/edit/${res.data.id}`, { state: { ...res.data } });
          } else {
            formPanelObject.reVaildation(res);
            return false;
          }
          return true;
        }}
        onReset={(form: FormPanelObject) => {
          if (typeof onCancel === 'function') {
            form.resetFields();
            onCancel(form);
          }
          return false;
        }}
      />
    </Modal>
  );
};

export default Groups;
